import { Editor, EditorProps } from '../editor';
import { State as ControlState, default as Control } from './control';
import { showImageDialog } from '../../admin/controls/imageManager';
import React = require('react');
import { ImageService } from "maishu-services-sdk";


export interface EditorState extends Partial<ControlState> {

}


export default class MemberEditor extends Editor<EditorProps, EditorState> {
    imageServie: ImageService;
    constructor(props) {
        super(props);
        this.loadEditorCSS();
        this.state = {};
        this.imageServie = this.props.elementPage.createService(ImageService);
    }
    render() {
        let bg = this.state.bg ? this.imageServie.imageSource(this.state.bg) : Control.default_bg

        return (
            <div className="member-editor well">
                <div className="bg" style={{ height: 66 }}>
                    <label style={{ display: 'table-cell' }}>
                        背景图
                    </label>
                    <span style={{ display: 'table-cell', width: 120, height: 66, textAlign: 'center', cursor: 'pointer' }}>
                        <img src={bg} style={{ width: '100%', height: '100%' }}
                            onClick={() => {
                                showImageDialog(1, (imageIds) => {
                                    this.setState({ bg: imageIds[0] })
                                })
                            }} />
                        {/* <input type="file" title="点击修改背景图" multiple={false}
                            style={{
                                display: 'table-cell', width: 120, height: 66,
                                position: 'relative', top: -66, opacity: 0
                            }}
                            ref={(e: HTMLInputElement) => {
                                if (!e) return;
                                e.onchange = async () => {
                                    if (e.files[0]) {
                                        let { base64 } = await ui.imageFileToBase64(e.files[0], { width: 316, height: 184 });
                                        
                                        let { id } = await station.saveImage(base64);
                                        this.setState({ bg: id })
                                    }
                                }
                            }} /> */}
                    </span>
                </div>
                {bg != Control.default_bg ?
                    <div>
                        <label style={{ display: 'table-cell' }}></label>
                        <span style={{ display: 'table-cell' }}>
                            <input type="checkbox" onChange={() => {
                                this.setState({ bg: null })
                            }} />  使用默认背景图
                        </span>
                    </div> : null
                }
                <div>
                    <label style={{ display: 'table-cell' }}>余额</label>
                    <span style={{ display: 'table-cell' }}>
                        <input type="checkbox"
                            ref={(e: HTMLInputElement) => {
                                if (!e) return;
                                e.checked = this.state.showBalance == true;
                                e.onchange = () => {
                                    this.state.showBalance = e.checked;
                                    this.setState(this.state);
                                }
                            }} />显示余额
                    </span>
                </div>
                {/* <div>
                    <label style={{ display: 'table-cell' }}>积分</label>
                    <span style={{ display: 'table-cell' }}>
                        <input type="checkbox"
                            ref={(e: HTMLInputElement) => {
                                if (!e) return;
                                e.checked = this.state.showScore == true;
                                e.onchange = () => {
                                    this.state.showScore = e.checked;
                                    this.setState(this.state);
                                }
                            }} />显示积分
                    </span>
                </div> */}
                {/* <div>
                    <label>销售员中心</label>
                    <span>
                        <label>
                            <input name="sells-center" type="radio"
                                ref={(e: HTMLInputElement) => {
                                    if (!e) return;
                                    e.checked = this.state.sellsCenter == 'showToMember';
                                    e.onchange = () => {
                                        this.state.sellsCenter = e.checked ? 'showToMember' : 'showToSells';
                                        this.setState(this.state);
                                    }
                                }} />对所有会员显示
                        </label>
                        <label>
                            <input name="sells-center" type="radio"
                                ref={(e: HTMLInputElement) => {
                                    if (!e) return;
                                    e.checked = this.state.sellsCenter == 'showToSells';
                                    e.onchange = () => {
                                        this.state.sellsCenter = e.checked ? 'showToSells' : 'showToMember';
                                        this.setState(this.state);
                                    }
                                }} />只对销售员显示
                        </label>
                    </span>
                </div> */}
            </div>
        );
    }
}